<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue双向数据绑定</title>
</head>
<style>
    #app{text-align:center;}
    .size{font-size:24px;}
    .color{color:#F00;}
    .background{background:#999;}
    .border{border:3px solid #F00;}
</style>
<body>
    <div id="app" v-bind:class="{ size : size , border : border , color : color , background : background }">
    vue.js双向绑定
        <input type="checkbox" v-model="size" id="size">
        <label for="size">文字大小</label>
        <input type="checkbox" v-model="border" id="border">
        <label for="border">边框</label>
        <input type="checkbox" v-model="color" id="color">
        <label for="color">文字颜色</label>
        <input type="checkbox" v-model="background" id="background">
        <label for="background">背景颜色</label>
    </div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            size : false,
            border : false,
            color : false,
            background : false
        }
    });
</script>
</body>
</html>
